<template>
  <div class="lc-table-column-filter">
    <template v-if="displayType == 'dialog'">
      <div class="lc-table-column-filter__trigger" ref="triggerRef">
        <slot></slot>
      </div>
      <el-dialog
        :title="title"
        v-model="isDialogShow"
        :modal="true"
        top="10%"
        :width="width"
        append-to-body
        :close-on-click-modal="false"
        custom-class="lc-table-column-filter__dialog"
      >
        <draggable
          v-if="isDialogShow"
          v-model="columnList"
          ghost-class="lc-table-column-filter__ghost"
          item-key="props"
        >
          <template #item="{ element }">
            <el-checkbox v-model="element[selectedKey]" :key="element.props" :title="element[labelKey]">
              <lc-svg-icon icon-class="draggable" />{{ element[labelKey] }}
            </el-checkbox>
          </template>
        </draggable>
        <template v-slot:footer>
          <div>
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="handleSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </template>
    <el-popover
      v-else
      popper-class="lc-table-column-filter__popover"
      :width="width"
      :title="title"
      :content="content"
      :trigger="trigger"
      :placement="placement"
    >
      <template v-slot:reference>
        <slot></slot>
      </template>
      <draggable v-model="columnList" ghost-class="lc-table-column-filter__ghost" item-key="props" @end="updateInput">
        <template #item="{ element }">
          <el-checkbox v-model="element[selectedKey]" :key="element.props" :title="element[labelKey]">
            <lc-svg-icon icon-class="draggable" />{{ element[labelKey] }}
          </el-checkbox>
        </template>
      </draggable>
    </el-popover>
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import draggable from 'vuedraggable';

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  labelKey: {
    type: String,
    default: 'label'
  },
  selectedKey: {
    type: String,
    default: 'showFlag'
  },
  displayType: {
    type: String,
    default: 'dialog'
  }
});
const isDialogShow = ref(false);
const title = ref('自定义展示列');
const content = ref('');
const trigger = ref('click');
const placement = ref('bottom');
const columnList = ref([]);
const triggerRef = ref();
const emits = defineEmits(['input', 'update:modelValue']);
const width = computed(() => {
  if (props.displayType == 'dialog') {
    if (props.modelValue.length < 8) {
      return '535px';
    } else if (props.modelValue.length < 15) {
      return '715px';
    } else {
      return '900px';
    }
  } else {
    return '180px';
  }
});
function initColumn() {
  columnList.value = props.displayType == 'dialog' ? JSON.parse(JSON.stringify(props.modelValue)) : props.modelValue;
}
function updateInput() {
  emits('input', columnList.value);
  emits('update:modelValue', columnList.value);
}
function handleSlotClick() {
  initColumn();
  isDialogShow.value = true;
}
function handleSubmit() {
  updateInput();
  isDialogShow.value = false;
}
function handleClose() {
  isDialogShow.value = false;
}
watch(() => props.modelValue, initColumn, { immediate: true });
onMounted(() => {
  if (props.displayType == 'dialog' && document.addEventListener) {
    triggerRef.value.addEventListener('click', handleSlotClick, false);
  }
});
onBeforeUnmount(() => {
  if (props.displayType == 'dialog' && document.removeEventListener) {
    triggerRef.value.removeEventListener('click', handleSlotClick, false);
  }
});
</script>
<style lang="scss">
.lc-table-column-filter {
  &__dialog {
    .el-checkbox {
      margin-bottom: 10px;
      cursor: move;
      .el-checkbox__label {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px;
        vertical-align: top;
      }
    }
  }
  &__popover {
    max-height: 300px;
    overflow: overlay;
    .el-checkbox {
      display: block;
      margin-bottom: 5px;
      cursor: move;
      .el-checkbox__label {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 120px;
        vertical-align: top;
      }
    }
  }
  &__ghost {
    opacity: 0.5;
    outline: 1px dashed #bbb;
  }
}
</style>
